<template>
  <div style="margin: 20px 0">
    <el-card>
      <el-button type="primary" size="mini" @click="onAdd('add')">增加停车计费规则</el-button>
      <el-table
        :header-row-style="{ backgroundColor: 'blue' }"
        style="margin: 15px 0"
        :data="list"
      >
        <el-table-column label="序号" width="100">
          <template #default="{$index}">
            {{ $index+1+10*(params.page-1) }}
          </template>
        </el-table-column>
        <el-table-column label="计费规则编号" prop="ruleNumber" width="150" />
        <el-table-column label="计费规则名称" prop="ruleName" width="140" />
        <el-table-column
          label="免费时长 (分钟)"
          prop="freeDuration"
          width="150"
        />
        <el-table-column
          label="收费上限 (元)"
          prop="chargeCeiling"
          width="150"
        />
        <el-table-column label="计费方式" prop="ruleName" />
        <el-table-column label="计费规则" prop="ruleNameView" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text" @click="onAdd('edit',row.id)">编辑</el-button>
            <el-button type="text" @click="onDel(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          :page-size="params.pageSize"
          :current-page="params.page"
          layout="total, prev, pager, next, sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 弹出层 -->
    <add-edit :visible.sync="visible" @onSuccess="onLoad" />
  </div>
</template>

<script>
import { delFeeRulesAPI, getListFeeRulesAPI } from '@/api/feeRules'
import addEdit from './components/add-edit.vue'
export default {
  components: { addEdit },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        pageSize: 10
      },
      total: 10,
      visible: false
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    // 点击删除
    async onDel(id) {
      await this.$confirm('是否确认删除当前计费规则？', {
        okText: '确定',
        cancelText: '取消',
        type: 'warning'
      })
      await delFeeRulesAPI(id)
      this.$message.success('删除成功')
      this.onLoad()
    },
    // 监听页码
    handleSizeChange(val) {
      this.params.pageSize = val
      this.onLoad()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.onLoad()
    },
    // 点击添加 判断是编辑还是添加
    onAdd(type, id) {
      if (type === 'add') {
        this.visible = true
      }
    },
    async onLoad() {
      const res = await getListFeeRulesAPI(this.params)
      // console.log(res)
      this.list = res.data.rows
      this.total = res.data.total
      // console.log(this.total)
    }
  }
}
</script>

<style>
</style>
